<template>
  <div class="w-[100%] h-[100%]">

    <div class="mt-[0px]">
      <ContentWrap>
        <SearchBox :queryForm="searchList" :showExpland="false" @query="handleSearchQuery"
                   :show-len="3"
                   :show-export="false"/>
      </ContentWrap>
    </div>

    <div class="mt-[30px]">
      <el-button type="primary" color="#3721FF" round @click="handleBtnClick({ type:'add' })">+
        新增流量包
      </el-button>

    </div>

    <div class="mt-[30px]">
      <QueryTable
        pk="id"
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="true"
        :show-expand="false"
      >

        <template #status="{row,index}">
          <div class="relative">
            <el-switch
              v-model="row.status"
              class="ml-2"
              :active-value="0"
              :inactive-value="1"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            />

            <div class="absolute top-[0] left-[0] w-[100%] h-[100%]"
                 @click="handleBtnClick({
                 type:'switchStatus',
                 row,index
                 })"

            ></div>
          </div>

        </template>

        <template #flowType="{row}">
          <div>{{ flowType.find(at => at.value == row.flowType)?.label }}</div>
        </template>


        <template #dataValue="{row}">
          <div>{{ Math.floor((row.dataValue/(1024*1024))*100)/100 }}GB</div>
        </template>

        <template #amount="{row}">
          <div>{{ Math.round(row.amount)/100 }}</div>
        </template>
      </QueryTable>

    </div>

    <ComfirmPops ref="ConfirmPropsRef" :type="'radio'" @confirm="getConfirmValue" title="新增"
                 :show-icon="false" width="537">
      <template #content>
        <InfoAction ref="InfoActionRef" :info="selectedRow"/>
      </template>
    </ComfirmPops>
  </div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/src/Icon.vue"
import QueryTable from "@/components/TableData/index.vue"
import ImagePreview from "@/components/ImagePreview/index.vue"
import InfoAction from "./components/InfoAction.vue"
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import type {PurchaseAdvice} from "@/api/purchase/advice/type";
import {throttle, confirmPromote} from "@/utils";
import {useMessage} from "@/hooks/web/useMessage";

import {OneThaliApi,OneThaliVO} from "@/api/system/tenant/flow";

import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";

const payType = getStrDictOptions(DICT_TYPE.PAY_TYPE);

const flowType = getStrDictOptions(DICT_TYPE.FLOW_TYPE);


console.log(payType,"payType")

const message = useMessage();

const InfoActionRef = ref(null)
const ConfirmPropsRef = ref(null)

const searchList: TradeOrderQueryVO[] = ref(
  [
    {
      label: '流量包名称',
      code: 'name',
      type: 'input',
    },
    {
      label: '流量包类型',
      code: 'flowType',
      type: 'select',
      options:flowType
    },
  ]
)
const initQueryParams = {
  pageNo: 1, pageSize: 10
}

const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'edit',
    name: '编辑'
  },

  {
    color: '#FF4E00',
    code: 'delItem',
    name: '删除'
  }
]);


const th = ref([
  {
    name: '流量包id',
    code: 'id',
    required: true
  },
  {
    name: '流量包名称',
    code: 'thali',
    required: true
  },
  {
    name: '流量包类型',
    code: 'flowType',
    required: true
  },
  {
    name: '包含流量',
    code: 'dataValue',
    required: true
  },
  {
    name: '购买金额',
    code: 'amount',
    required: true
  },
  {
    name: '绑定套餐',
    code: 'combo',
    required: true
  },
  {
    name: '当前状态',
    code: 'status',
    required: true
  },
  {
    name: '创建者',
    code: '',
  },
  {
    name: '创建时间',
    code: 'createTime',
    date: true
  },

]);

const dataList = ref<ServicePolicyTemplateVO[]>([]);
const ids = ref<Array<string | number>>([]);
const total = ref(0);

const initRow = {}

const selectedRow = ref<PurchaseAdvice>({...initRow})

const isShowDialog = ref(false)


const queryParams = ref({
  ...initQueryParams
})

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  getList();
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  add() {
    selectedRow.value = {}
    ConfirmPropsRef.value && ConfirmPropsRef.value.show();
  },
  edit({data}) {
    selectedRow.value ={
      ...data.row,
      dataValue:Math.floor(data.row.dataValue/(1024*1024)*100)/100,
      amount:Math.round(data.row.amount)/100,
      flowType:data.row.flowType.toString()
    }
    ConfirmPropsRef.value && ConfirmPropsRef.value.show();
  },
  delItem: throttle(async ({data}) => {
    await confirmPromote({
      content: "确认删除数据吗？"
    })

    await GlobeStateApi.deleteGlobeState(data.row.id);
    getList();

  }, 1000),
  importArea() {
    //TODO 批量导入
  },
  pagination() {
    getList();
  },
  switchStatus: throttle(async ({row, index}) => {
    try {
      await confirmPromote({
        content: `确认${row.status == 1 ? '开启' : '关闭'}吗？`
      })

      let option = {
        id: row.id,
        status: row.status == 0 ? 1 : 0
      }

      await OneThaliApi.switchStatus(option)
      row.status = option.status

    } catch (e) {
    }

  }, 1000)

}


const getConfirmValue = async () => {
  InfoActionRef.value && await InfoActionRef.value.confirm(() => {
    // 刷新列表
    getList();
    message.success('操作成功');
    ConfirmPropsRef.value && ConfirmPropsRef.value.hide();
  });

}


const getList = async () => {
  let res = await OneThaliApi.getOneThaliPage({
    ...queryParams.value,
    type:payType.find(at=>at.label == '流量')?.value
  });
  dataList.value = res.list;
  total.value = res.total;
}


onMounted(() => {
  getList();

})

</script>
<style lang="scss" scoped>

</style>
